import React, { Component } from 'react'

export default class TabD extends Component {
  constructor(){
    //组件正在实例化
    //执行父类的构造器，创建父类对象
   super()
   console.log("constructor");
  }
  state = {
    count:10,
    user:{
      id:1
    }
  }
  // 挂载阶段
  componentWillMount(){
    console.log("即将挂载");
  }
  componentDidMount(){
    console.log("componentDidMount");
    // console.log(document.getElementById("app"));
  }

  //更新阶段
  shouldComponentUpdate(propsData,stateData){
    
    // console.log("shouldComponentUpdate");
    // if(){
    
    // }
    // if(stateData.count === this.state.count){
    //   return false
    // }
    if(stateData.user.id == this.state.user.id){
      return false
    }
    return true
  }
  componentDidUpdate(){
    console.log("componentDidUpdate");
  }

  componentWillUnmount(){
    console.log("componentWillUnmount");
  }


  changeUser = ()=>{
    this.setState({
      user:{id:1}
    })
  }

  render() {
    console.log("render");
    return (
      <div id='app'>
        <h3>TabD</h3>
        <p>{this.state.count}</p>
        <button onClick={()=>this.setState({count:10})}>修改</button>
        <p>{this.state.user.id}</p>
        <button onClick={this.changeUser}>修改</button>
      </div>
    )
  }
}
